<template>
     <div>
      <!-- 下拉菜单 -->
      <van-dropdown-menu>
        <van-dropdown-item  disabled  title="全部" />
        <van-dropdown-item v-model="value2" :options="option2" title="排序" @change="sortChange"  />
        <van-dropdown-item  v-model="value3" :options="arr" title="分类" @change="fenleiChange" />
        </van-dropdown-menu>
     <!-- 渲染 -->
         <div class="main">
              <dl v-for="item in newGoodlist" :key="item.id">
                 <dt><img v-lazy="item.list_pic_url"></dt>
                 <dd>
                    <p>{{item.name}}</p>
                    <p><span>{{item.retail_price | setColor}}</span></p>
                 </dd>
              </dl>
         </div>
    </div>   

</template>

<script>
export default {
props:["arr","newGoodlist"],
data() {
    return {
    
      value2: 'desc',
      value3:0,
      option2: [
        { text: '由高到低排序', value: 'desc' },
        { text: '由低到高排序', value: 'asc' },
      ],
      option3:[]
    };
  },
  methods:{
    sortChange(val){
        //排序中的value值 asc  desc

        //子传父
        this.$emit('self', val)
    },
    fenleiChange(val){
       //子传父
        this.$emit('self1', val)
    }
  }
}
</script>

<style lang="less" scoped>
   .main{width: 100%; display: flex; flex-wrap:wrap;
   justify-content:space-between;
        dl{width: 49%;
           img{width: 100%;}
           p{line-height: 30PX; font-size: 16PX;
              span{color:red}
             }
          }
   }

</style>